<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>用户管理</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link href="../../css/mine.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="../../jquery/jquery-1.8.3.min.js"></script>

    </head>

    <body>

        <div class="div_head">
            <span>
                <span style="float:left">当前位置是：-》资源管理》用户管理</span>
                <span style="float:right;margin-right: 8px;font-weight: bold">
                    <a style="text-decoration: none" href="/resource/demo2/list">【返回】</a>
                </span>
            </span>
        </div>
        <div></div>

        <div style="font-size: 13px;margin: 10px 5px">
            <form action="/resource/demo2/insertUser" method="post" >
                <table border="1" width="100%" class="table_a">
                    <tr>
                        <td width="120px;">用户编号<span style="color:red">*</span>：</td>
                        <td><input readonly type="text" name="userId"  value="${userId}"/></td>
                    </tr>
                    <tr>
                        <td>登录账号<span style="color:red">*</span>：</td>
                        <td>
                            <input readonly type="text" name="loginNumber"  value="${loginNumber}"/>
                        </td>
                    </tr>

                    <tr>
                        <td>用户姓名<span style="color:red">*</span>：</td>
                        <td>
                            <input required type="text" name="userName" /><span id="name"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>密码<span style="color:red">*</span>：</td>
                        <td>
                            <input required type="password"  name="password" />
                        </td>
                    </tr>
                    <tr>
                        <td>所属部门<span required style="color:red">*</span>：</td>
                        <td>

                            <select name="deptId">
                                <option value="0" >请选择</option>
                                <c:forEach items="${deptName}" var="name">
                                    <option value="${name.deptId}" }>${name.deptName}</option>
                                </c:forEach>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>所属职位<span required style="color:red">*</span>：</td>
                        <td>
                            <select id="roleId" name="roleId">
                                <option>请选择</option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td>身份证<span required  style="color:red">*</span>：</td>
                        <td>
                            <input type="text" name="cardId"  />
                        </td>
                    </tr>

                    <tr>
                        <td>联系电话<span style="color:red">*</span>：</td>
                        <td>
                            <input required type="text" name="userPhone" />
                        </td>
                    </tr>

                    <tr>
                        <td>邮箱<span style="color:red">*</span>：</td>
                        <td>
                            <input required type="text" name="userEmail"  />
                        </td>
                    </tr>

                    <tr>
                        <td>联系地址：</td>
                        <td>
                            <input required type="text" name="userAdress"  />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit"  value="添加">
                            <input type="reset" value="清空">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
    <script type="text/javascript">


        $(function () {
            /*1、异步联动查询部门角色信息*/
            $("[name='deptId']").change(function () {

                var deptId=$(this).val();
                if (deptId==0){
                    alert("请您选择部门！")
                } else {
                    $.ajax( {

                        url:"/resource/demo2/ajaxRequest",
                        type:"post",
                        data:"deptId="+deptId,
                        dataType:"json",
                        success:function (roleList) {
                            /*3、将jqery对象转换成js*/
                            $("#roleId")[0].length=0;
                            for (var i = 0; i<roleList.length ; i++) {
                                //                               标签中显示的值          value值
                                $("#roleId")[0].add(new Option(roleList[i].roleName,roleList[i].roleId));
                            }

                        },
                        error:function () {
                            alert("请求失败")
                        }

                    })
                }
            })

            /*2、ajax异步校验用户名*/

            $("[name='userName']").blur(function () {

                var userName =$(this).val();
               /* alert("异步校验用户名"+userName)*/
                if (userName==null||userName===''){
                    $("[name='userName']").next().html("<font color='#ff4500'>用户名不能为空!</font>");
                } else {

                    $.ajax({
                        url:"/resource/demo2/checkName",
                        data:"userName="+userName,
                        type:"post",
                        dataType:"json",
                        success:function (result) {
                            if (result>0){
                                $("[name='userName']").next().html("<font color='#ff4500'>用户名不可用!</font>");
                                $("[type='submit']").attr("disabled","disabled");
                            }else {
                                $("[name='userName']").next().html("");
                                $("[type='submit']").removeAttr("disabled");
                            }

                        }

                    })
                }


            })

        })




    </script>
</html>